<template>
  <page-header-wrapper>
    <div class="pa10 flex-y-center flex-x-sb">
      <div class="statistic" v-for="(item, index) in statisticLst" :key="'statisticLst' + index">
        <span class="money">{{ item.value }}</span>
        {{ item.title }}
      </div>
    </div>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户">
                <a-input v-model="where.keyword" placeholder="请输入用户ID/昵称" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="代理区域">
                <city-select v-model="area_arr" data-type="area" value-type="1" @change="areaChange"></city-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="代理级别">
                <a-select v-model="where.area_level" placeholder="请选择代理级别" allowClear>
                  <a-select-option value="1">省代</a-select-option>
                  <a-select-option value="2">市代</a-select-option>
                  <a-select-option value="3">区代</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="通过时间">
                <a-range-picker @change="dateChange" placeholder="请选择通过时间" allowClear style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :border="false">
      <a-button style="margin-bottom: 10px" type="primary" @click="add">添加代理</a-button>
      <div class="table-operator flex-y-center flex-x-sb">
        <div class="flex-y-center flex-x-sb">
          <a-radio-group v-model="where.status" style="margin-right: 15px" @change="getList">
            <a-radio-button :value="''"> 全部 </a-radio-button>
            <a-radio-button :value="0"> 待审核 </a-radio-button>
            <a-radio-button :value="1"> 通过 </a-radio-button>
            <a-radio-button :value="2"> 不通过 </a-radio-button>
          </a-radio-group>
          <a-radio-group v-model="where.role" style="margin-right: 15px" @change="getList">
            <a-radio-button :value="''"> 全部 </a-radio-button>
            <a-radio-button :value="1"> 区域代表 </a-radio-button>
            <a-radio-button :value="2"> 区域股东 </a-radio-button>
          </a-radio-group>
          <a-radio-group v-model="where.check" @change="getList">
            <a-radio-button :value="''"> 全部 </a-radio-button>
            <a-radio-button :value="1"> 达标 </a-radio-button>
            <a-radio-button :value="0"> 不达标 </a-radio-button>
          </a-radio-group>
        </div>
        <div>检索结果：{{ totalCount }}条，佣金{{ total_money }}，积分{{ total_integral }}</div>
      </div>
      <a-table
        style="width: 100%; overflow-x: auto"
        v-if="columns.length"
        ref="tableList"
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          current: this.where.pageNo,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
        :scroll="{ x: 1500 }"
        @change="handleTableChange"
      >
        <template slot="user_info" slot-scope="record">
          <div class="flex-y-center" v-if="record.user">
            <img style="width: 35px; height: 35px; margin-right: 5px" :src="record.user.avatar_url" alt="" />
            {{ record.user.nickname }}
          </div>
        </template>
        <template slot="area_level" slot-scope="record">
          {{ record.area_level == 1 ? '省代' : record.area_level == 2 ? '市代' : record.area_level == 3 ? '区代' : '' }}
        </template>
        <template slot="role" slot-scope="record"> {{ record.role == 1 ? '区域代表' : '区域股东' }}</template>
        <template slot="area" slot-scope="record">
          {{ record.province }}{{ record.city }}{{ record.district }}
        </template>
        <template slot="holder_rate" slot-scope="record"> {{ record.holder_rate }}%</template>
        <template slot="check" slot-scope="record">
          <a-tag :color="record.check == 1 ? 'blue' : ''">
            {{ record.check == 1 ? '达标' : '不达标' }}
          </a-tag>
        </template>
        <template slot="status" slot-scope="record">
          <a-tag :color="record.status == 1 ? 'blue' : record.status == 2 ? 'red' : record.status == 3 ? 'red' : ''">
            {{ record.status == 1 ? '通过' : record.status == 2 ? '不通过' : record.status == 3 ? '不达标' : '待审核' }}
          </a-tag>
        </template>
        <template slot="action" slot-scope="record">
          <a @click="audit(record, 1)" v-if="record.status == 0">通过</a>
          <a-divider type="vertical" v-if="record.status == 0" />
          <a @click="audit(record, 2)" v-if="record.status == 0">拒绝</a>
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确认删除吗？" @confirm="del(record)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>
    <editForm ref="editForm" @confirm="getList"></editForm>
    <a-modal
      title="拒绝代理"
      :width="500"
      :mask-closable="false"
      :destroy-on-close="true"
      v-model="refuseReasonModal"
      @cancel="refuseReasonModal = false"
      :confirm-loading="modalLoading"
      @ok="refuseReasonOk"
    >
      <a-form-model
        ref="refuseReasonData"
        :model="refuseReasonData"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-model-item
          label="拒绝原因："
          prop="refuse_reason"
          :rules="[{ required: true, message: '请输入拒绝原因', trigger: ['blur', 'change'] }]"
        >
          <a-textarea
            v-model="refuseReasonData.refuse_reason"
            placeholder="请输入拒绝原因"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
var _self
import { agentListApi, agentDeleteApi, agentSaveApi } from '@/api/area'
import editForm from './editForm'
import CitySelect from '@/components/CitySelect/CitySelect'
export default {
  components: { editForm, CitySelect },
  data() {
    return {
      statisticLst: [
        {
          title: '区域已结算佣金',
          value: '913.54',
        },
        {
          title: '区域待结算佣金',
          value: '1000.00',
        },
        {
          title: '区域已结算积分',
          value: '0.00',
        },
        {
          title: '区域待结算积分',
          value: 0,
        },
        {
          title: '区域代理人数',
          value: 0,
        },
        {
          title: '已代理区域数量',
          value: 0,
        },
      ],
      where: {
        role: '',
        status: '',
        province_id: '',
        city_id: '',
        district_id: '',
        area_level: undefined,
        check: '',
        keyword: '',
        dateStart: '',
        dateEnd: '',
        sortField: '',
        sortOrder: '',
        pageNo: 1,
        pageSize: 10,
      },
      area_arr: [],
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 60,
        },
        {
          title: '用户ID',
          dataIndex: 'user_id',
          width: 80,
        },
        {
          title: '用户信息',
          scopedSlots: { customRender: 'user_info' },
          width: 160,
        },
        {
          title: '推荐人',
          dataIndex: 'parent_nickname',
          width: 160,
        },
        {
          title: '代理信息',
          dataIndex: 'name',
          width: 100,
        },
        {
          title: '级别',
          width: 100,
          scopedSlots: { customRender: 'area_level' },
          align: 'center',
        },
        {
          title: '身份',
          width: 100,
          scopedSlots: { customRender: 'role' },
          align: 'center',
        },
        {
          title: '代理区域',
          width: 180,
          scopedSlots: { customRender: 'area' },
        },
        {
          title: '比例',
          width: 110,
          scopedSlots: { customRender: 'holder_rate' },
          align: 'center',
        },
        {
          title: '累计佣金',
          dataIndex: 'total_area_money',
          width: 120,
          align: 'center',
          sorter: true,
        },
        {
          title: '累计积分',
          dataIndex: 'total_area_integral',
          width: 120,
          align: 'center',
          sorter: true,
        },
        {
          title: '已释放',
          dataIndex: 'total_send_integral',
          width: 100,
          align: 'center',
        },
        {
          title: '待释放',
          dataIndex: 'wait_send_integral',
          width: 100,
          align: 'center',
        },
        {
          title: '已提现',
          dataIndex: 'total_cash_money',
          width: 100,
          align: 'center',
        },
        {
          title: '可提现',
          dataIndex: 'can_cash_money',
          width: 100,
          align: 'center',
        },
        {
          title: '考核状态',
          width: 110,
          align: 'center',
          scopedSlots: { customRender: 'check' },
        },
        {
          title: '状态',
          width: 110,
          align: 'center',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '申请时间',
          dataIndex: 'created_at',
          width: 180,
          align: 'center',
          sorter: true,
        },
        {
          title: '通过时间',
          dataIndex: 'audited_at',
          width: 180,
          align: 'center',
          sorter: true,
        },
        {
          title: '操作',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
          width: 110,
        },
      ],
      dataSource: [],
      loading: false,
      totalCount: 0,
      total_money: 0,
      total_integral: 0,
      refuseReasonModal: false,
      refuseReasonData: {},
      modalLoading: false,
    }
  },
  created() {
    _self = this
    _self.getList()
  },
  methods: {
    getList() {
      _self.loading = true
      agentListApi(_self.where)
        .then((res) => {
          const {
            data,
            totalCount,
            total_money,
            total_integral,
            area_agent_num,
            area_agent_num1,
            area_integral1,
            area_integral2,
            area_money1,
            area_money2,
          } = res.data
          _self.dataSource = data
          _self.totalCount = totalCount
          _self.total_money = total_money
          _self.total_integral = total_integral
          _self.statisticLst[4].value = area_agent_num || 0
          _self.statisticLst[5].value = area_agent_num1 || 0
          _self.statisticLst[2].value = area_integral1 || 0
          _self.statisticLst[3].value = area_integral2 || 0
          _self.statisticLst[0].value = area_money1 || 0
          _self.statisticLst[1].value = area_money2 || 0
          _self.loading = false
        })
        .catch((err) => {
          _self.loading = false
        })
    },
    // 搜索地区
    areaChange(e) {
      _self.where.province_id = e[0] || ''
      _self.where.city_id = e[1] || ''
      _self.where.district_id = e[2] || ''
    },
    // 搜索时间
    dateChange(date, dateString) {
      _self.where.dateStart = dateString[0]
      _self.where.dateEnd = dateString[1]
    },
    handleTableChange(pagination, filters, sorter) {
      _self.where.sortField = sorter.field
      if (sorter.order) {
        if (sorter.order == 'ascend') {
          _self.where.sortOrder = 'asc'
        } else {
          _self.where.sortOrder = 'desc'
        }
      } else {
        _self.where.sortField = ''
        _self.where.sortOrder = ''
      }
      _self.getList()
    },
    // 添加
    add() {
      _self.$refs.editForm.visible = true
    },
    // 编辑
    edit(item) {
      _self.$refs.editForm.formData.id = item.id
      _self.$refs.editForm.getInfo()
    },
    // 审核
    audit(item, status) {
      var formData = JSON.parse(JSON.stringify(item))
      formData.status = status
      if (status == 1) {
        _self.$confirm({
          title: '提示',
          content: '确定通过此代理吗?',
          onOk() {
            agentSaveApi(formData)
              .then((res) => {
                if (res.code == 0) {
                  _self.$message.success(res.msg)
                  _self.getList()
                } else {
                  _self.$message.error(res.msg)
                }
              })
              .catch((res) => {})
          },
          onCancel() {},
        })
      } else {
        _self.refuseReasonModal = true
        _self.refuseReasonData = formData
      }
    },
    // 删除
    del(item) {
      const hide = this.$message.loading('删除中...', 0)
      agentDeleteApi(item.id)
        .then((res) => {
          hide()
          if (res.code === 0) {
            _self.$message.success(res.msg)
            _self.getList()
          } else {
            _self.$error(res.msg)
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    tablePageChange(e) {
      this.where.pageNo = e
      this.getList()
    },
    paginationSizeChange(current, size) {
      this.where.pageNo = current
      this.where.pageSize = size
      this.getList()
    },
    refuseReasonOk() {
      _self.$refs.refuseReasonData.validate((valid) => {
        if (valid) {
          _self.modalLoading = true
          agentSaveApi(_self.refuseReasonData)
            .then((res) => {
              _self.modalLoading = false
              if (res.code === 0) {
                _self.$message.success(res.msg)
                _self.refuseReasonModal = false
                _self.getList()
              } else {
                _self.$message.error(res.msg)
              }
            })
            .catch((err) => {
              _self.modalLoading = false
              console.log(err, 'err')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss">
.pa10 {
  padding: 10px 5px;
  background-color: #fff;
  margin-bottom: 10px;
}
.statistic {
  width: 12.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #000;
  .money {
    font-size: 20px;
    font-weight: 600;
  }
}
.ant-cascader-picker,
.ant-cascader-input {
  height: 32px;
}
</style>
